<template>
  <el-container class="home-container">
    <!-- 头部区 -->
    <el-header>
      <div>
        <span><i class="el-icon-edit"></i>简易学生成绩管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体区 -->
    <!-- 内容主体 -->
    <el-main>
      <el-form
        :inline="true"
        :model="queryInfo"
        class="demo-form-inline"
        size="medium"
      >
        <el-form-item label="学号">
          <el-input v-model="queryInfo.number" placeholder="学号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="queryInfo.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryStudent">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="dialogVisible = true"
            >录入</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="studentList" border style="width: 100%">
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="number" label="学号"> </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="mysql" label="MySQL成绩"> </el-table-column>
        <el-table-column prop="web" label="Web成绩"> </el-table-column>
        <el-table-column prop="vue" label="Vue成绩"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="editStudentInfo(scope.row)"
              type="primary"
              size="small"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="deleteStudentInfo(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-main>

    <el-dialog
      title="录入信息"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
    >
      <span>
        <el-form
          :inline="true"
          :model="student"
          class="demo-form-inline"
          :rules="rules"
          ref="studentRef"
        >
          <el-divider content-position="left">学生信息</el-divider>
          <el-form-item label="学号" prop="number">
            <el-input v-model="student.number" placeholder="学号"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="student.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别" style="width: 100%">
            <el-radio v-model="student.sex" label="男">男</el-radio>
            <el-radio v-model="student.sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="班级" prop="class">
            <el-input v-model="student.class" placeholder="班级"></el-input>
          </el-form-item>
          <el-divider content-position="left">课程成绩</el-divider>
          <el-form-item
            label="MySQL成绩"
            style="width: 100%"
            label-width="100px"
          >
            <el-input-number
              v-model="student.mysql"
              :min="0"
              :max="100"
              label="MySQL成绩"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="Web编程成绩"
            style="width: 100%"
            label-width="100px"
          >
            <el-input-number
              v-model="student.web"
              :min="0"
              :max="100"
              label="Web编程成绩"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="Vue成绩" style="width: 100%" label-width="100px">
            <el-input-number
              v-model="student.vue"
              :min="0"
              :max="100"
              label="Vue成绩"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStudentInfo">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑信息"
      :visible.sync="editDialogVisible"
      width="45%"
      :before-close="handleClose"
    >
      <span>
        <el-form
          :inline="true"
          :model="student"
          class="demo-form-inline"
          :rules="rules"
          ref="studentRef"
        >
          <el-divider content-position="left">学生信息</el-divider>
          <el-form-item label="学号" prop="number">
            <el-input v-model="student.number" placeholder="学号"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="student.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别" style="width: 100%">
            <el-radio v-model="student.sex" label="男">男</el-radio>
            <el-radio v-model="student.sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="班级" prop="class">
            <el-input v-model="student.class" placeholder="班级"></el-input>
          </el-form-item>
          <el-divider content-position="left">课程成绩</el-divider>
          <el-form-item
            label="MySQL成绩"
            style="width: 100%"
            label-width="100px"
          >
            <el-input-number
              v-model="student.mysql"
              :min="0"
              :max="100"
              label="MySQL成绩"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="Web编程成绩"
            style="width: 100%"
            label-width="100px"
          >
            <el-input-number
              v-model="student.web"
              :min="0"
              :max="100"
              label="Web编程成绩"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="Vue成绩" style="width: 100%" label-width="100px">
            <el-input-number
              v-model="student.vue"
              :min="0"
              :max="100"
              label="Vue成绩"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmStudentInfo">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      studentList: [],
      dialogVisible: false,
      editDialogVisible: false,
      student: {
        number: "",
        class: "",
        name: "",
        sex: "男",
        mysql: "",
        web: "",
        vue: "",
      },
      rules: {
        number: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { min: 3, max: 15, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
      },
      queryInfo: {
        name: "",
        number: "",
        pagenum: 1,
        pagesize: 10,
      },
      total: 10,
    };
  },
  created() {
    this.getAll();
  },
  methods: {
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    // 查询
    queryStudent() {
      var that = this
      this.$http
        .get("students", {
          params: that.queryInfo,
        })
        .then((res, err) => {
          that.studentList = res.data.students;
          that.total = res.data.total;
        })
    },
    handleClose() {
      this.dialogVisible = true
      this.editDialogVisible = true
    },
    // 添加学生信息
    addStudentInfo() {
      this.$refs.studentRef.validate(async (valid) => {
        if (valid) {
          alert("submit!");
          // 保存
          const { data: res } = await this.$http.post("student", this.student);
          console.log("保存学生信息");
          console.log(res);
          this.dialogVisible = false;
          this.student = {
            number: "",
            class: "",
            name: "",
            sex: "男",
            mysql: "",
            web: "",
            vue: "",
          };
          this.getAll();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getAll() {
      var that = this
      this.$http
        .get("students", {
          params: that.queryInfo,
        })
        .then((res, err) => {
          that.studentList = res.data.students;
          that.total = res.data.total;
        });
    },
    // 编辑学生
    editStudentInfo(row) {
      var that = this;
      that.editDialogVisible = true;
      this.$http.get("student/" + row._id).then((res, err) => {
        console.log(res.data._id);
        that.student = res.data;
      });
    },
    // 确认修改
    confirmStudentInfo() {
      var that = this;
      var _id = that.student._id;
      console.log("修改的id");
      console.log(_id);
      this.$http.post("student/" + _id, this.student).then((res, err) => {
        console.log("修改返回数据");
        console.log(res);
        that.getAll();
      });
      that.editDialogVisible = false;
    },
    // 删除学生
    async deleteStudentInfo(row) {
      var that = this;
      const confirmResult = await this.$confirm(
        "此操作将永久删除该学生信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);

      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }

      this.$http.delete("student/" + row._id).then((res, err) => {
        that.getAll();
        return this.$message.success("删除成功");
      });
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getAll();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getAll();
    },
  },
};
</script>

<style scoped>
.home-container {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  font-size: 18px;
}
.el-header > div {
  display: flex;
  align-items: center;
}
.el-header div span {
  margin-left: 15px;
}
.logo {
  margin-left: 20px;
  width: 100px;
  height: 55px;
}
.el-menu {
  border-right: none;
}
/* .el-main {
  background-color: #eaedf1;
} */

.toggle-button {
  /* background-color: #dadde7; */
  line-height: 24px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.el-pagination {
  margin-top: 10px;
}
</style>
